
@extends ('layouts/app')

@section('content')
<div class="weui-panel__bd">
    <a  class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__bd">
            <h4 class="center_w f30">头像</h4>
            <div class="user-img">
                <img  class="" src="/img/eat.png" alt="">
                <label  class="" for="uploaderInput"></label>
            </div>
            <div class="weui-uploader__input-box pull-right" style="display: none;">
                <form action="" id="img-form">
                    @csrf
                    <input id="uploaderInput" name="thumb" class="weui-uploader__input" type="file" accept="image/*" multiple="" onchange="saveImg('/uploadImg', '#img-form', showHead)">
                </form>
            </div>
        </div>
    </a>
</div>
<div class="weui-cells topic">
    <div class="weui-cell weui-cell_access" href="">
        <div class="weui-cell__bd">
            <p >用户名</p>
        </div>
        <div class="monicker">
            <input class="weui-input text-right" name="userName" type="tel">
        </div>
    </div>
    <div class="weui-cell ">
        <div class="weui-cell__hd gender">
            <label for="gender" class="weui-label">性别</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input " id="gender" type="text" value="男" readonly="" data-values="女">
        </div>
    </div>
    <div class="weui-cell weui-cell_access" >
        <div class="weui-cell__bd">
            <p >手机号码</p>
        </div>
        <div class="cell">1312313231</div>
    </div>
</div>
<div class="weui-gallery" style="display: none">
    <div class="weui-navbar__item top-navbar">
        <svg class="icon f48 nav-arrow gary3" aria-hidden="true" onclick="closeGallery()">
            <use xlink:href="#icon--18"></use>
        </svg>
        <span class="gary3">头像</span>
        <span class="gary3 pull-right">使用</span>
    </div>
    <div class="weui-gallery__img">
        <div class="crop-area"></div>
    </div>
    <div class="weui-gallery__opr">
        <a href="javascript:" class="weui-gallery__del" onclick="closeGallery()">
            <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a>
    </div>
</div>
<script>
    var _token = $("input[name='_token']").val();

    // 选择性别
    $("#gender").select({
        title: "选择性别",
        items: [{title: '男', value: 0}, {title: '女', value: 1}],
        onChange: function(res) {
            console.log("res", res);

        },
        onClose: function(res) {
            console.log("close", res);
            saveInfo({sex: res.data.values});
        },
        onOpen: function() {
            console.log("open");
        }
    });

    // 选择用户名
    $("input[name='userName']").focus(function () {
        var input = $(this),
            oldVal = input.val();
        input.val('');

        $.prompt({
            title: '用户名修改',
            input: '',
            empty: false, // 是否允许为空
            onOK: function (value) {
                //点击确认
                console.log("value", value);
                saveInfo({name: value});
            },
            onCancel: function () {
                //点击取消
                input.val(oldVal);
            }
        });
    });

    // 选择电话
    $(".cell").click(function () {
        $.toast("手机号暂不支持修改", "text");
    });

    //上传头像回调
    var showHead = function (res) {
        //console.log("666", res);
        if (res.code === 200) {
            //console.log(res.data);
            //图片路径
            saveInfo({avatar: res.data});
        }else{
            $.toast(res.info, 'text');
        }

    };
    // 拿缓存的用户信息
    var userInfo  = Storage.get("userInfo");
    if (userInfo.status) {
        userInfo = JSON.parse(userInfo.value);
        showUserInfo(userInfo);
    }
    function showUserInfo (data) {
        if (data[0].avatar){
            $(".user-img img").attr("src",data[0].avatar);
        }
        $("input[name='userName']").val(data[0].name);
        $(".cell").text(data[0].mobile);
        if (data[0].sex) {
            $("#gender").val("女");
        } else {
            $("#gender").val("男");
        }

    }
    // 关闭图片预览模态框
    function closeGallery() {
        $('.weui-gallery').hide();
    }

    // 保存数据
    function saveInfo (data) {

        $.post("/api/user/updateMessage", data, function (res) {

            if (typeof res === 'string') {
                res = JSON.parse(res);
            }

            $.toast(res.info, 'text');

            // 如果成功，要重新获取一次个人信息
            if (res.code === 200) {
                getUserInfo(_token, function (res) {
                    showUserInfo(res)
                });
            }
        });
    }
</script>
@endsection

